<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/global.css">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/styles.css">


	<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>

	<!--bootstrap-->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<script src="js/bootstrap.min.js" charset="UTF-8"></script>

	<script src="js/swiper.min.js" charset="UTF-8"></script>
	<script src="js/global.js" charset="UTF-8"></script>
	<script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
	<!--vue-->
	<script src="/webjars/vue/2.6.10/dist/vue.js"></script>
	<script src="/webjars/axios/0.19.0/dist/axios.min.js"></script>

	<!--xtiper.js-->
	<link rel="stylesheet" href="xtiper/css/xtiper.css">
	<script src="/xtiper/js/xtiper.min.js"></script>

	<!--asset-->
	<link rel="stylesheet" href="/jqueryModalLayer/asset/css/modallayer.min.css" charset="UTF-8">
	<link rel="stylesheet" href="/jqueryModalLayer/asset/css/all.min.css" charset="UTF-8">
	<script src="/jqueryModalLayer/asset/js/all.min.js" charset="UTF-8"></script>
	<script src="/jqueryModalLayer/asset/js/modallayer-ie.min.js" charset="UTF-8"></script>

	<title>U袋网</title>
</head>
<body>
	<div id="vuebox">
		<!-- 顶部tab -->
		<div class="tab-header">
			<div class="inner">
				<div class="pull-left">
					<div class="pull-left">嗨，欢迎来到<span class="cr">U袋网</span></div>
					<a href="agent_level.html">网店代销</a>
					<a href="temp_article/udai_article4.html">帮助中心</a>
				</div>
				<div class="pull-right">
					<a href="login.html"><span class="cr">登录</span></a>
					<a href="login.html?p=register">注册</a>
					<a href="udai_welcome.html">我的U袋</a>
					<a href="udai_order.html">我的订单</a>
					<a href="udai_integral.html">积分平台</a>
				</div>
			</div>
		</div>
		<!-- 顶部标题 -->
		<div class="bgf5 clearfix">
			<div class="top-user">
				<div class="inner">
					<a class="logo" href="index.html"><img src="images/icons/logo.jpg" alt="U袋网" class="cover"></a>
					<div class="title">购物车</div>
				</div>
			</div>
		</div>

		<div class="content clearfix bgf5">
			<section class="user-center inner clearfix">
				<div class="user-content__box clearfix bgf">
					<div class="title">购物车-确认支付 </div>
					<div class="shop-title">收货地址</div>
					<form action="" class="shopcart-form__box">
						<div class="addr-radio">
							<div v-for="(item,index) in addresslist" :class="{ 'active': item.ismoren==1, 'radio-line radio-box': 1==1 }">
								<label class="radio-label ep" title="153****9999">
									<input name="addr" :checked="item.ismoren==1"  :value="item.id" v-model="addressid" autocomplete="off" type="radio"><i class="iconfont icon-radio"></i>
									{{item.address}}&nbsp;
									（{{item.name}} 收） {{item.phone}}
								</label>
								<a href="javascript:void(0)" class="default" v-if="item.ismoren==1">默认地址</a>
								<a href="javascript:void(0)" class="default" v-else-if="item.ismoren==0">设为默认地址</a>
								<a href="udai_address_edit.html" class="edit">修改</a>
							</div>
						</div>
						<div class="add_addr"><a href="udai_address.html">添加新地址</a></div>
						<div class="shop-title">确认订单</div>
						<div class="shop-order__detail">
							<table class="table">
								<thead>
								<tr>
									<th width="120"></th>
									<th width="300">商品信息</th>
									<th width="150">单价</th>
									<th width="200">数量</th>
									<th width="200">运费</th>
									<th width="80">总价</th>
								</tr>
								</thead>
								<tbody>
								<tr v-for="(item,index) in orderlist">
									<th scope="row">
											<img :src="item.img1" alt="" class="cover">
									</th>
									<td>
										<div class="name ep3">{{item.proname}}  {{item.explains}}</div>
										<div class="type c9">颜色分类：{{item.color}}  尺码：{{item.size}}</div>
									</td>
									<td>¥{{item.price}}</td>
									<td>{{item.count}}</td>
									<td>¥0.0</td>
									<td>¥{{item.totalprice}}</td>
								</tr>
								</tbody>
							</table>
						</div>
						<div class="shop-cart__info clearfix">
							<div class="pull-left text-left">
								<div class="info-line text-nowrap">购买时间：<span class="c6">{{unlist.createdate}}</span></div>
<!--								<div class="info-line text-nowrap">购买时间：<span class="c6">2017年09月14日 17:31:05</span></div>-->
								<div class="info-line text-nowrap">交易类型：<span class="c6">担保交易</span></div>
								<div class="info-line text-nowrap">交易号：<span class="c6">{{unlist.orderdetailsid}}</span></div>
							</div>
							<div class="pull-right text-right">
								<div class="form-group">
									<label for="coupon" class="control-label">优惠券使用：</label>
									<select id="coupon" >
										<option value="-1" selected>- 请选择可使用的优惠券 -</option>
										<option value="1">【满￥20.0元减￥2.0】</option>
										<option value="2">【满￥30.0元减￥2.0】</option>
										<option value="3">【满￥25.0元减￥1.0】</option>
										<option value="4">【满￥10.0元减￥1.5】</option>
										<option value="5">【满￥15.0元减￥1.5】</option>
										<option value="6">【满￥20.0元减￥1.0】</option>
									</select>
								</div>
								<div class="info-line">优惠活动：<span class="c6">无</span></div>
								<div class="info-line">运费：<span class="c6">¥0.00</span></div>
								<div class="info-line"><span class="favour-value">已优惠 ¥2.0</span>合计：<b class="fz18 cr">¥{{unlist.countprice}}</b></div>
								<div class="info-line fz12 c9">（可获 <span class="c6">20</span> 积分）</div>
							</div>
						</div>
						<div class="shop-title">确认订单</div>

						<!--支付选择-->
						<div class="pay-mode__box">
							<div class="radio-line radio-box">
								<label class="radio-label ep">
									<input name="pay-mode" value="1" v-model="paytype" autocomplete="off" type="radio"><i class="iconfont icon-radio"></i>
									<span class="fz16">余额支付</span><span class="fz14">（可用余额：¥{{user.balance}}）</span>
								</label>
								<div class="pay-value">支付<b class="fz16 cr">18.00</b>元</div>
							</div>
							<div class="radio-line radio-box">
								<label class="radio-label ep">
									<input name="pay-mode" value="2" v-model="paytype" autocomplete="off" type="radio"><i class="iconfont icon-radio"></i>
									<img src="images/icons/alipay.png" alt="支付宝支付">
								</label>
								<div class="pay-value">支付<b class="fz16 cr">18.00</b>元</div>
							</div>
							<div class="radio-line radio-box">
								<label class="radio-label ep">
									<input name="pay-mode" value="3" v-model="paytype" autocomplete="off" type="radio"><i class="iconfont icon-radio"></i>
									<img src="images/icons/paywechat.png" alt="微信支付">
								</label>
								<div class="pay-value">支付<b class="fz16 cr">18.00</b>元</div>
							</div>
						</div>
						<div class="user-form-group shopcart-submit">
							<button type="button" @click="overBuy()" class="btn">继续支付</button>
						</div>
					</form>
				</div>
			</section>
		</div>

		<!-- 右侧菜单 -->
		<div class="right-nav">
			<ul class="r-with-gotop">
				<li class="r-toolbar-item">
					<a href="udai_welcome.html" class="r-item-hd">
						<i class="iconfont icon-user" data-badge="0"></i>
						<div class="r-tip__box"><span class="r-tip-text">用户中心</span></div>
					</a>
				</li>
				<li class="r-toolbar-item">
					<a href="../templates/udai_shopcart.html" class="r-item-hd">
						<i class="iconfont icon-cart"></i>
						<div class="r-tip__box"><span class="r-tip-text">购物车</span></div>
					</a>
				</li>
				<li class="r-toolbar-item">
					<a href="udai_collection.html" class="r-item-hd">
						<i class="iconfont icon-aixin"></i>
						<div class="r-tip__box"><span class="r-tip-text">我的收藏</span></div>
					</a>
				</li>
				<li class="r-toolbar-item">
					<a href="" class="r-item-hd">
						<i class="iconfont icon-liaotian"></i>
						<div class="r-tip__box"><span class="r-tip-text">联系客服</span></div>
					</a>
				</li>
				<li class="r-toolbar-item">
					<a href="issues.html" class="r-item-hd">
						<i class="iconfont icon-liuyan"></i>
						<div class="r-tip__box"><span class="r-tip-text">留言反馈</span></div>
					</a>
				</li>
				<li class="r-toolbar-item to-top">
					<i class="iconfont icon-top"></i>
					<div class="r-tip__box"><span class="r-tip-text">返回顶部</span></div>
				</li>
			</ul>

		</div>
		<!-- 底部信息 -->
		<div class="footer">
			<div class="footer-tags">
				<div class="tags-box inner">
					<div class="tag-div">
						<img src="images/icons/footer_1.gif" alt="厂家直供">
					</div>
					<div class="tag-div">
						<img src="images/icons/footer_2.gif" alt="一件代发">
					</div>
					<div class="tag-div">
						<img src="images/icons/footer_3.gif" alt="美工活动支持">
					</div>
					<div class="tag-div">
						<img src="images/icons/footer_4.gif" alt="信誉认证">
					</div>
				</div>
			</div>
			<div class="footer-links inner">
				<dl>
					<dt>U袋网</dt>
					<a href="temp_article/udai_article10.html"><dd>企业简介</dd></a>
					<a href="temp_article/udai_article11.html"><dd>加入U袋</dd></a>
					<a href="temp_article/udai_article12.html"><dd>隐私说明</dd></a>
				</dl>
				<dl>
					<dt>服务中心</dt>
					<a href="temp_article/udai_article1.html"><dd>售后服务</dd></a>
					<a href="temp_article/udai_article2.html"><dd>配送服务</dd></a>
					<a href="temp_article/udai_article3.html"><dd>用户协议</dd></a>
					<a href="temp_article/udai_article4.html"><dd>常见问题</dd></a>
				</dl>
				<dl>
					<dt>新手上路</dt>
					<a href="temp_article/udai_article5.html"><dd>如何成为代理商</dd></a>
					<a href="temp_article/udai_article6.html"><dd>代销商上架教程</dd></a>
					<a href="temp_article/udai_article7.html"><dd>分销商常见问题</dd></a>
					<a href="temp_article/udai_article8.html"><dd>付款账户</dd></a>
				</dl>
			</div>
			<div class="copy-box clearfix">
				<ul class="copy-links">
					<a href="agent_level.html"><li>网店代销</li></a>
					<a href="class_room.html"><li>U袋学堂</li></a>
					<a href="udai_about.html"><li>联系我们</li></a>
					<a href="temp_article/udai_article10.html"><li>企业简介</li></a>
					<a href="temp_article/udai_article5.html"><li>新手上路</li></a>
				</ul>
				<!-- 版权 -->
				<p class="copyright">
					© 2005-2017 U袋网 版权所有，并保留所有权利<br>
					ICP备案证书号：闽ICP备16015525号-2&nbsp;&nbsp;&nbsp;&nbsp;福建省宁德市福鼎市南下村小区（锦昌阁）1栋1梯602室&nbsp;&nbsp;&nbsp;&nbsp;Tel: 18650406668&nbsp;&nbsp;&nbsp;&nbsp;E-mail: 18650406668@qq.com
				</p>
			</div>
		</div>
	</div>
</body>
</html>
<script type="text/javascript">
	var vm=new Vue({
		el: "#vuebox",
		data: {

			addresslist:[],//总地址的列表
			orderlist: [],//总共的列表
			unlist:{
				createdate:null//创建日期
				,orderdetailsid:null//交易号
				,countprice:0//总价钱
			}//工具数据集合
			,user:{}//用户信息
			,addressid:0//下单地址
			,paytype:1//支付类型
			,coupon:0//优惠劵

		},
		mounted() {
			//查询地址
			this.queryAddress();
			//查询列表
			this.queryCart();
			//查询用户
			this.queryUser();
		},
		watch: {
		},
		methods: {
			//查询总地址
			queryAddress:function () {
				axios({url:"/address/list", method:"get",
					params:{}})
						.then(res=>{
							this.addresslist=res.data;
							for (var i=0;i<this.addresslist.length;i++){
								if(this.addresslist[i].ismoren==1){
									this.addressid=this.addresslist[i].id;
								}
							}
						});
			},
			//查询总购物车
			queryCart:function () {
				axios({url:"/order/list", method:"get",
					params:{}})
						.then(res=>{
							this.orderlist=res.data;
							for (var i=0;i<this.orderlist.length;i++){
								this.unlist.countprice=this.unlist.countprice+this.orderlist[i].totalprice;
							}
							//将其他数据存到工具属性集合
							this.unlist.createdate=this.orderlist[0].createdate;
							this.unlist.orderdetailsid=this.orderlist[0].orderdetailsid;
						});
			},
			//查询用户信息
			queryUser:function(){
				axios({url:"/buyer/query/by/phone", method:"get",
					params:{}})
						.then(res=>{
							this.user=res.data;
						});
			},
			//继续支付
			overBuy:function () {
				//判断收货地址
				if(this.addressid==0){
					alert("请选择地址!");
					return false;
				}

				//如果选择余额支付
				if(this.paytype==1){
					if(this.user.balance<this.unlist.countprice){//余额不足
						let option = {
							hook: {
								initStart: function () {
									// 检查之前老旧实例如果存在则销毁
									if (document.querySelector('#modal-layer-container'))
										ModalLayer.removeAll();
								}
							},
							popupTime: 0,
							type: 'alert',
							title: '提示',
							dragOverflow: true,
							content: '<i class="fas fa-check" style="color: deepskyblue"></i>余额不足!',
						};
						ModalLayer.alert(option);
						return false;
					}
					if(confirm("确认要下单吗?")){
						//先将地址编号存入
						var idlist=new Array();
						idlist.push(this.addressid);
						//在讲订单编号存入
						for (var i=1;i<=this.orderlist.length;i++){
							idlist.push(this.orderlist[i-1].id);
							// alert(idlist[i]);
						}
						axios.post("/order/balpay",idlist).then(res=>{
							if(res.data.msg=="yes"){
								alert("成功了!");
								window.location.href="udai_order.html";
							}
							if(res.data.msg=="no"){
								alert("失败了");
								return false;
							}
						})

					}


					<!--弹窗插件-->
					/*let option = {
						title: '测试',
						popupTime: 10,
						hook: {
							initStart: function () {
								// 检查之前老旧实例如果存在则销毁
								if (document.querySelector('#modal-layer-container'))
									ModalLayer.removeAll();
							}
						},
						displayProgressBar: false,
						displayProgressBarPos: 'left',
						content: '确认下单?',
						okText: '确定',
						noText: '不了不了',
						callback: {
							ok: function () {//
								this.hide();

								/!*ModalLayer.alert({
									content: '<i class="fas fa-check-circle" style="color: green"></i> Good Luck!',
									// parentModalLayer: this
								});*!/
							},
							no: function () {
								this.hide();
								/!*ModalLayer.alert({
									content: '<i class="fas fa-window-close" style="color: red"></i> !!<br>五秒后自动关闭该窗口'
								});*!/
							}
						}
					}
					ModalLayer.confirm(option);*/
					/*xtip.confirm('确认要支付嘛？','',{title:'支付嘛？？？',shade:false,btn:['Yes','No']},function(){
						xtip.msg('支付成功！');});*/
				}else if(this.paytype==2){//选择支付宝支付
					xtip.msg('支付宝支付!',{icon:'s',type:'w'});
				}else if(this.paytype==3){//选择微信支付
					xtip.msg('微信支付!',{icon:'s',type:'w'});
				}

			}



		}


	})



	$('#coupon').bind('change',function() {
		console.log($(this).val());
	})
	$(document).ready(function(){
		$(this).on('change','input',function() {
			$(this).parents('.radio-box').addClass('active').siblings().removeClass('active');
		})
	});
			$(document).ready(function(){ $('.to-top').toTop({position:false}) });
</script>
